import React from 'react';
import {
    InputGroup, InputLeftAddon, Input,
    Checkbox, Box, Button, Text, chakra, Stack, useToast, FormControl, FormErrorMessage
} from '@chakra-ui/core'
import { FaUserAlt, FaLock, FaMobile } from "react-icons/fa";
import { AiFillWechat, AiOutlineQq } from 'react-icons/ai';
import axios from 'axios';
import { Formik, Form, Field } from 'formik'

const Link = chakra('a');

export default () => {

    const toast = useToast()
    const validateEmail = (value) => {
        let error
        if (!value) {
            error = "请输入邮箱"
        }
        return error
    }
    const validatePassword = (value) => {
        let error
        if (!value) {
            error = "请输入密码"
        }
        return error
    }

    const validateName = (value) => {
        let error
        if (!value) {
            error = "请输入昵称"
        }
        return error
    }

    // 注册
    const onRegist = (user, actions) => {
        axios.post(' https://conduit.productionready.io/api/users', {
            user
        }).then(res => {
            toast({
                position: "top",
                render: () => (
                    <Box p={2} bg="#c6f6d5" lineHeight="24px" border="1px solid #c6f6d5" borderRadius="6px">
                        登录成功
                    </Box>
                ),
            })
            actions.setSubmitting(false)
        }).catch(res => {
            toast({
                position: "top",
                render: () => (
                    <Box bg="#fed7d7" p={2} lineHeight="24px" border="1px solid #fed7d7" borderRadius="6px">
                        注册失败
                    </Box>
                ),
            })
            actions.setSubmitting(false)
        })
    }
    return <>
        <Formik
            initialValues={{ email: '', password: '' }}
            onSubmit={(values, actions) => {
                onRegist(values, actions)
            }}
        >
            {(props) => (
                <Form>
                    <Field name="username" validate={validateEmail}>
                        {({ field, form }) => (
                            <FormControl isInvalid={form.errors.username && form.touched.username}>
                                <InputGroup>
                                    <InputLeftAddon
                                        style={{ border: '0px', backgroundColor: "#b5b5b51a" }}
                                        children={<FaUserAlt size="16px" />}
                                    />

                                    <Input {...field} id="username" style={{ border: '0px', backgroundColor: "#b5b5b51a" }} paddingY={4} placeholder="你的昵称" />
                                </InputGroup>
                                <FormErrorMessage>{form.errors.username}</FormErrorMessage>
                            </FormControl>

                        )}
                    </Field>
                    <Field name="email" validate={validateEmail}>
                        {({ field, form }) => (
                            <FormControl isInvalid={form.errors.email && form.touched.email}>
                                <InputGroup>
                                    <InputLeftAddon
                                        style={{ border: '0px', backgroundColor: "#b5b5b51a" }}
                                        children={<FaMobile size="16px" />}
                                    />

                                    <Input {...field} id="email" placeholder="邮箱" style={{ border: '0px', backgroundColor: "#b5b5b51a" }} paddingY={4} placeholder="手机号或邮箱" />
                                </InputGroup>
                                <FormErrorMessage>{form.errors.email}</FormErrorMessage>
                            </FormControl>

                        )}
                    </Field>
                    <Field name="password" validate={validatePassword}>
                        {({ field, form }) => (
                            <FormControl isInvalid={form.errors.password && form.touched.password}>
                                <InputGroup>
                                    <InputLeftAddon
                                        style={{ border: '0px', backgroundColor: "#b5b5b51a" }}
                                        children={<FaLock size="16px" />}
                                    />
                                    <Input
                                        {...field} id="password"
                                        style={{ border: '0px', backgroundColor: "#b5b5b51a" }}
                                        paddingY={4}
                                        type="password"
                                        placeholder="密码"
                                    />
                                </InputGroup>
                                <FormErrorMessage>{form.errors.password}</FormErrorMessage>
                            </FormControl>
                        )}
                    </Field>
                    <Button marginTop="20px" colorScheme="blue" bgColor="#42c02e" borderRadius="25px" w="100%" isLoading={props.isSubmitting}
                        type="submit">注册</Button>
                </Form>
            )}
        </Formik>
        <Box marginBottom="10px" marginTop="10px">
            <Text color="#969696" fontSize="12px" textAlign="center">
                点击 “注册” 即表示您同意并愿意遵守简书
            </Text>
            <Text color="#969696" fontSize="12px" textAlign="center">
                <Link target="_blank" color="#3194d0" cursor="pointer" isExternal href="https://www.jianshu.com/p/c44d171298ce">用户协议</Link>
                和
                <Link target="_blank" color="#3194d0" cursor="pointer" isExternal href="https://www.jianshu.com/p/2ov8x3">隐私政策</Link>
            </Text>
        </Box>
        <Box marginTop="50px" display="flex" alignItems="center" justifyContent="space-around" marginBottom="10px">
            <Box borderBottom="1px solid #b5b5b5" w={60}></Box>
            <Text color="#b5b5b5" fontSize="12px">社交账号直接注册</Text>
            <Box borderBottom="1px solid #b5b5b5" w={60}></Box>
        </Box>
        <Box marginBottom="10px" display="flex" display="flex" justifyContent="center" >
            <Stack spacing="10px" direction={["column", "row"]} >
                <Box w="50px" h="50px" display="flex" justifyContent="center" alignItems="center">
                    <AiFillWechat size={28} color="#00bb29" cursor="pointer"></AiFillWechat>
                </Box>
                <Box w="50px" h="50px" display="flex" justifyContent="center" alignItems="center">
                    <AiOutlineQq size={28} color="#498ad5" cursor="pointer"></AiOutlineQq>
                </Box>
            </Stack>
        </Box>
    </>
}
